

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <title>Client-Side Storage — Netinfo.Vue.js</title>
    <meta charset="utf-8">
    <meta name="description" content="Vue.js - The Progressive JavaScript Framework">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

    <link rel="alternate" hreflang="x-default" href="https://vuejs.org/v2/cookbook/client-side-storage.html">
    <link rel="alternate" hreflang="zh" href="https://cn.vuejs.org/v2/cookbook/client-side-storage.html">
    <link rel="alternate" hreflang="ja" href="https://jp.vuejs.org/v2/cookbook/client-side-storage.html">
    <link rel="alternate" hreflang="ru" href="https://ru.vuejs.org/v2/cookbook/client-side-storage.html">
    <link rel="alternate" hreflang="ko" href="https://kr.vuejs.org/v2/cookbook/client-side-storage.html">
    <link rel="alternate" hreflang="pt-BR" href="https://br.vuejs.org/v2/cookbook/client-side-storage.html">
    <link rel="alternate" hreflang="fr" href="https://fr.vuejs.org/v2/cookbook/client-side-storage.html">

    <meta property="og:type" content="article">
    <meta property="og:title" content="Client-Side Storage — Vue.js">
    <meta property="og:description" content="Vue.js - The Progressive JavaScript Framework">
    <meta property="og:image" content="https://cn.vuejs.org//netinfofe/images/logo.png">

    <meta name="twitter:card" content="summary">
    <meta name="twitter:title" content="Client-Side Storage — Vue.js">
    <meta name="twitter:description" content="Vue.js - The Progressive JavaScript Framework">
    <meta name="twitter:image" content="https://cn.vuejs.org/images/logo.png">

    <link rel="apple-touch-icon" sizes="57x57" href="/netinfofe/images/icons/apple-icon-57x57.png">
    <link rel="apple-touch-icon" sizes="60x60" href="/netinfofe/images/icons/apple-icon-60x60.png">
    <link rel="apple-touch-icon" sizes="72x72" href="/netinfofe/images/icons/apple-icon-72x72.png">
    <link rel="apple-touch-icon" sizes="76x76" href="/netinfofe/images/icons/apple-icon-76x76.png">
    <link rel="apple-touch-icon" sizes="114x114" href="/netinfofe/images/icons/apple-icon-114x114.png">
    <link rel="apple-touch-icon" sizes="120x120" href="/netinfofe/images/icons/apple-icon-120x120.png">
    <link rel="apple-touch-icon" sizes="144x144" href="/netinfofe/images/icons/apple-icon-144x144.png">
    <link rel="apple-touch-icon" sizes="152x152" href="/netinfofe/images/icons/apple-icon-152x152.png">
    <link rel="apple-touch-icon" sizes="180x180" href="/netinfofe/images/icons/apple-icon-180x180.png">
    <link rel="icon" type="image/png" sizes="192x192"  href="/netinfofe/images/icons/android-icon-192x192.png">
    <link rel="icon" type="image/png" sizes="32x32" href="/netinfofe/images/icons/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="96x96" href="/netinfofe/images/icons/favicon-96x96.png">
    <link rel="icon" type="image/png" sizes="16x16" href="/netinfofe/images/icons/favicon-16x16.png">
    <meta name="msapplication-TileImage" content="/images/icons/ms-icon-144x144.png">
    <link rel="icon" href="/netinfofe/images/logo.png" type="image/png">

    <meta name="msapplication-TileColor" content="#4fc08d">
    <meta name="theme-color" content="#4fc08d">

    <meta name="msapplication-config" content="browserconfig.xml">
    <link rel="manifest" href="/manifest.json">

    <!-- <link href='//fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600|Roboto Mono' rel='stylesheet' type='text/css'> -->
    <!-- <link href='//fonts.googleapis.com/css?family=Dosis:500&text=Vue.js' rel='stylesheet' type='text/css'> -->

    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">

    <!-- main page styles -->
    <link rel="stylesheet" href="/netinfofe/css/page.css">

    <!-- this needs to be loaded before guide's inline scripts -->
    <script src="/netinfofe/js/vue.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script>
      Vue.config.productionTip = true
      window.PAGE_TYPE = "cookbook"
    </script>

    <!-- ga -->
    <script>
      (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
      (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
      m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
      })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

      ga('create', 'UA-46852172-3', 'cn.vuejs.org');
      ga('send', 'pageview');
    </script>
  </head>
  <body class="docs">
    <div id="mobile-bar" >
      <a class="menu-button"></a>
      <a class="logo" href="/"></a>
    </div>
    <div id="header">
  <a id="logo" href="/netinfofe/">
    <img src="/netinfofe/images/logo.png" alt="vue logo">
    <span>Netinfo.Vue.js</span>
  </a>
  <ul id="nav">
    <li>
  <!--<form id="search-form">
    <input type="text" id="search-query-nav" class="search-query st-default-search-input">
  </form>-->
</li>
<!--<li class="nav-dropdown-container learn">
  <a class="nav-link current">学习</a><span class="arrow"></span>
  <ul class="nav-dropdown">
    <li><ul>
      <li><a href="/netinfofe/v2/guide/" class="nav-link">教程</a></li>
      <li><a href="/netinfofe/v2/api/" class="nav-link">API</a></li>
      <li><a href="/netinfofe/v2/style-guide/" class="nav-link">风格指南</a></li>
      <li><a href="/netinfofe/v2/examples/" class="nav-link">示例</a></li>
      <li><a href="/netinfofe/v2/cookbook/" class="nav-link current">Cookbook</a></li>
    </ul></li>
  </ul>
</li>
-->
<!--<li class="nav-dropdown-container ecosystem">
  <a class="nav-link">生态系统</a><span class="arrow"></span>
  <ul class="nav-dropdown">
    <li><h4>帮助</h4></li>
    <li><ul>
      <li><a href="https://forum.vuejs.org/" class="nav-link" target="_blank">论坛</a></li>
      <li><a href="https://chat.vuejs.org/" class="nav-link" target="_blank">聊天室</a></li>
      <li><a href="https://www.vuemeetups.org/" class="nav-link" target="_blank">聚会</a></li>
    </ul></li>
    <li><h4>工具</h4></li>
    <li>
      <ul>
        <li><a href="https://github.com/vuejs/vue-devtools" class="nav-link" target="_blank">Devtools</a></li>
        <li><a href="https://cli.vuejs.org/" class="nav-link" target="_blank">Vue CLI</a></li>
        <li><a href="https://vue-loader.vuejs.org" class="nav-link" target="_blank">Vue Loader</a></li>
      </ul>
    </li>
    <li><h4>核心插件</h4></li>
    <li><ul>
      <li><a href="https://router.vuejs.org/" class="nav-link" target="_blank">Vue Router</a></li>
      <li><a href="https://vuex.vuejs.org/" class="nav-link" target="_blank">Vuex</a></li>
      <li><a href="https://ssr.vuejs.org/" class="nav-link" target="_blank">Vue 服务端渲染</a></li>
    </ul></li>
    <li><h4>信息</h4></li>
    <li><ul>
      <li><a href="https://news.vuejs.org" class="nav-link" target="_blank">周刊</a></li>
      <li><a href="https://github.com/vuejs/roadmap" class="nav-link" target="_blank">Roadmap</a></li>
      <li><a href="https://twitter.com/vuejs" class="nav-link" target="_blank">Twitter</a></li>
      <li><a href="https://medium.com/the-vue-point" class="nav-link" target="_blank">博客</a></li>
      <li><a href="https://vuejobs.com/?ref=vuejs" class="nav-link" target="_blank">工作</a></li>
    </ul></li>
    <li><h4>资源列表</h4></li>
    <li><ul>
      <li><a href="https://github.com/vuejs" class="nav-link" target="_blank">官方仓库</a></li>
      <li><a href="https://curated.vuejs.org/" class="nav-link" target="_blank">Vue 优选</a></li>
      <li><a href="https://github.com/vuejs/awesome-vue" class="nav-link" target="_blank">Vue 资源</a></li>
    </ul></li>
  </ul>
</li>
-->

<!--<li class="nav-dropdown-container support-vue">
  <a href="/support-vuejs/" class="nav-link">支持 Vue</a><span class="arrow"></span>
  <ul class="nav-dropdown">
    <li><ul>
      <li><a href="/support-vuejs/#One-time-Donations" class="nav-link">一次性赞助</a></li>
      <li><a href="/support-vuejs/#Recurring-Pledges" class="nav-link">周期性赞助</a></li>
      <li><a href="https://www.smallsticker.com/%E8%B4%B4%E7%BA%B8/vue.html" class="nav-link">贴纸</a></li>
      <li><a href="https://vue.threadless.com" target="_blank" class="nav-link">T 恤商店</a></li>
    </ul></li>
  </ul>
</li>
-->
<!--<li class="nav-dropdown-container language">
  <a class="nav-link">多语言</a><span class="arrow"></span>
  <ul class="nav-dropdown">
    <li><a href="https://vuejs.org/v2/cookbook/client-side-storage.html" class="nav-link" target="_blank">English</a></li>
    <li><a href="https://jp.vuejs.org/v2/cookbook/client-side-storage.html" class="nav-link" target="_blank">日本語</a></li>
    <li><a href="https://ru.vuejs.org/v2/cookbook/client-side-storage.html" class="nav-link" target="_blank">Русский</a></li>
    <li><a href="https://kr.vuejs.org/v2/cookbook/client-side-storage.html" class="nav-link" target="_blank">한국어</a></li>
    <li><a href="https://br.vuejs.org/v2/cookbook/client-side-storage.html" class="nav-link" target="_blank">Português</a></li>
    <li><a href="https://fr.vuejs.org/v2/cookbook/client-side-storage.html" class="nav-link" target="_blank">Français</a></li>
    <li><a href="https://vi.vuejs.org/v2/cookbook/client-side-storage.html" class="nav-link" target="_blank">Tiếng Việt</a></li>
  </ul>
</li>
-->
<!--<li><a href="https://github.com/vuejs/cn.vuejs.org/" target="_blank" class="nav-link contribute">参与翻译</a></li>-->

<li><a href="/netinfofe/v2/guide/" class="nav-link">教程</a></li>
<li><a href="/netinfofe/v2/components/" class="nav-link">组件</a></li>
<li><a href="/netinfofe/v2/api/" class="nav-link">API</a></li>
<li><a href="/netinfofe/v2/style-guide/" class="nav-link">风格指南</a></li>
<li><a href="/netinfofe/v2/examples/" class="nav-link">示例</a></li>
<li><a href="/netinfofe/v2/cookbook/" class="nav-link current">Cookbook</a></li>


<li>
  <a href="/netinfofe/v2/aboutus/" class="nav-link team">关于我们</a>
</li>

  </ul>
</div>

    
      <div id="main" class="fix-sidebar">
        
          
  <div class="sidebar">
  <div class="sidebar-inner">
    <ul class="main-menu">
      <li>
  <!--<form id="search-form">
    <input type="text" id="search-query-sidebar" class="search-query st-default-search-input">
  </form>-->
</li>
<!--<li class="nav-dropdown-container learn">
  <a class="nav-link current">学习</a><span class="arrow"></span>
  <ul class="nav-dropdown">
    <li><ul>
      <li><a href="/netinfofe/v2/guide/" class="nav-link">教程</a></li>
      <li><a href="/netinfofe/v2/api/" class="nav-link">API</a></li>
      <li><a href="/netinfofe/v2/style-guide/" class="nav-link">风格指南</a></li>
      <li><a href="/netinfofe/v2/examples/" class="nav-link">示例</a></li>
      <li><a href="/netinfofe/v2/cookbook/" class="nav-link current">Cookbook</a></li>
    </ul></li>
  </ul>
</li>
-->
<!--<li class="nav-dropdown-container ecosystem">
  <a class="nav-link">生态系统</a><span class="arrow"></span>
  <ul class="nav-dropdown">
    <li><h4>帮助</h4></li>
    <li><ul>
      <li><a href="https://forum.vuejs.org/" class="nav-link" target="_blank">论坛</a></li>
      <li><a href="https://chat.vuejs.org/" class="nav-link" target="_blank">聊天室</a></li>
      <li><a href="https://www.vuemeetups.org/" class="nav-link" target="_blank">聚会</a></li>
    </ul></li>
    <li><h4>工具</h4></li>
    <li>
      <ul>
        <li><a href="https://github.com/vuejs/vue-devtools" class="nav-link" target="_blank">Devtools</a></li>
        <li><a href="https://cli.vuejs.org/" class="nav-link" target="_blank">Vue CLI</a></li>
        <li><a href="https://vue-loader.vuejs.org" class="nav-link" target="_blank">Vue Loader</a></li>
      </ul>
    </li>
    <li><h4>核心插件</h4></li>
    <li><ul>
      <li><a href="https://router.vuejs.org/" class="nav-link" target="_blank">Vue Router</a></li>
      <li><a href="https://vuex.vuejs.org/" class="nav-link" target="_blank">Vuex</a></li>
      <li><a href="https://ssr.vuejs.org/" class="nav-link" target="_blank">Vue 服务端渲染</a></li>
    </ul></li>
    <li><h4>信息</h4></li>
    <li><ul>
      <li><a href="https://news.vuejs.org" class="nav-link" target="_blank">周刊</a></li>
      <li><a href="https://github.com/vuejs/roadmap" class="nav-link" target="_blank">Roadmap</a></li>
      <li><a href="https://twitter.com/vuejs" class="nav-link" target="_blank">Twitter</a></li>
      <li><a href="https://medium.com/the-vue-point" class="nav-link" target="_blank">博客</a></li>
      <li><a href="https://vuejobs.com/?ref=vuejs" class="nav-link" target="_blank">工作</a></li>
    </ul></li>
    <li><h4>资源列表</h4></li>
    <li><ul>
      <li><a href="https://github.com/vuejs" class="nav-link" target="_blank">官方仓库</a></li>
      <li><a href="https://curated.vuejs.org/" class="nav-link" target="_blank">Vue 优选</a></li>
      <li><a href="https://github.com/vuejs/awesome-vue" class="nav-link" target="_blank">Vue 资源</a></li>
    </ul></li>
  </ul>
</li>
-->

<!--<li class="nav-dropdown-container support-vue">
  <a href="/support-vuejs/" class="nav-link">支持 Vue</a><span class="arrow"></span>
  <ul class="nav-dropdown">
    <li><ul>
      <li><a href="/support-vuejs/#One-time-Donations" class="nav-link">一次性赞助</a></li>
      <li><a href="/support-vuejs/#Recurring-Pledges" class="nav-link">周期性赞助</a></li>
      <li><a href="https://www.smallsticker.com/%E8%B4%B4%E7%BA%B8/vue.html" class="nav-link">贴纸</a></li>
      <li><a href="https://vue.threadless.com" target="_blank" class="nav-link">T 恤商店</a></li>
    </ul></li>
  </ul>
</li>
-->
<!--<li class="nav-dropdown-container language">
  <a class="nav-link">多语言</a><span class="arrow"></span>
  <ul class="nav-dropdown">
    <li><a href="https://vuejs.org/v2/cookbook/client-side-storage.html" class="nav-link" target="_blank">English</a></li>
    <li><a href="https://jp.vuejs.org/v2/cookbook/client-side-storage.html" class="nav-link" target="_blank">日本語</a></li>
    <li><a href="https://ru.vuejs.org/v2/cookbook/client-side-storage.html" class="nav-link" target="_blank">Русский</a></li>
    <li><a href="https://kr.vuejs.org/v2/cookbook/client-side-storage.html" class="nav-link" target="_blank">한국어</a></li>
    <li><a href="https://br.vuejs.org/v2/cookbook/client-side-storage.html" class="nav-link" target="_blank">Português</a></li>
    <li><a href="https://fr.vuejs.org/v2/cookbook/client-side-storage.html" class="nav-link" target="_blank">Français</a></li>
    <li><a href="https://vi.vuejs.org/v2/cookbook/client-side-storage.html" class="nav-link" target="_blank">Tiếng Việt</a></li>
  </ul>
</li>
-->
<!--<li><a href="https://github.com/vuejs/cn.vuejs.org/" target="_blank" class="nav-link contribute">参与翻译</a></li>-->

<li><a href="/netinfofe/v2/guide/" class="nav-link">教程</a></li>
<li><a href="/netinfofe/v2/components/" class="nav-link">组件</a></li>
<li><a href="/netinfofe/v2/api/" class="nav-link">API</a></li>
<li><a href="/netinfofe/v2/style-guide/" class="nav-link">风格指南</a></li>
<li><a href="/netinfofe/v2/examples/" class="nav-link">示例</a></li>
<li><a href="/netinfofe/v2/cookbook/" class="nav-link current">Cookbook</a></li>


<li>
  <a href="/netinfofe/v2/aboutus/" class="nav-link team">关于我们</a>
</li>

    </ul>
    <div class="list">
      
        <h2>
          
          Cookbook<sup class="beta">beta</sup>

        </h2>
        <ul class="menu-root">
  
    
    
    <li>
      <a href="/netinfofe/v2/cookbook/index.html" class="sidebar-link">介绍</a>
    </li>
  
    
    
    <li>
      <a href="/netinfofe/v2/cookbook/adding-instance-properties.html" class="sidebar-link">添加实例属性</a>
    </li>
  
    
    
    <li>
      <a href="/netinfofe/v2/cookbook/form-validation.html" class="sidebar-link">表单校验</a>
    </li>
  
    
    
    <li>
      <a href="/netinfofe/v2/cookbook/editable-svg-icons.html" class="sidebar-link">可编辑的 SVG 图标系统</a>
    </li>
  
    
    
    <li>
      <a href="/netinfofe/v2/cookbook/serverless-blog.html" class="sidebar-link">创建一个基于 CMS 的博客</a>
    </li>
  
    
    
    <li>
      <a href="/netinfofe/v2/cookbook/unit-testing-vue-components.html" class="sidebar-link">Vue 组件的单元测试</a>
    </li>
  
    
    
    <li>
      <a href="/netinfofe/v2/cookbook/creating-custom-scroll-directives.html" class="sidebar-link">创建自定义滚动指令</a>
    </li>
  
    
    
    <li>
      <a href="/netinfofe/v2/cookbook/debugging-in-vscode.html" class="sidebar-link">在 VS Code 和 Chrome 中调试</a>
    </li>
  
    
    
    <li>
      <a href="/netinfofe/v2/cookbook/using-axios-to-consume-apis.html" class="sidebar-link">使用 axios 访问 API</a>
    </li>
  
    
    
    <li>
      <a href="/netinfofe/v2/cookbook/avoiding-memory-leaks.html" class="sidebar-link">避免内存泄漏</a>
    </li>
  
    
    
    <li>
      <a href="/netinfofe/v2/cookbook/client-side-storage.html" class="sidebar-link current">Client-Side Storage</a>
    </li>
  
    
    
    <li>
      <a href="/netinfofe/v2/cookbook/packaging-sfc-for-npm.html" class="sidebar-link">Packaging Vue Components for npm</a>
    </li>
  
    
    
    <li>
      <a href="/netinfofe/v2/cookbook/dockerize-vuejs-app.html" class="sidebar-link">Dockerize Vue.js App</a>
    </li>
  
</ul>

      
    </div>
  </div>
</div>

<!--
<div id="sidebar-sponsors-platinum-right">
  <div class="main-sponsor">
    <span>白金赞助商</span>
    <div>
    <a href="https://www.bitsrc.io/?utm_source=vue&utm_medium=vue&utm_campaign=vue&utm_term=vue&utm_content=vue" target="_blank" class="logo">
      <img src="/netinfofe/images/bit-wide.png" alt="">
    </a>
    <a href="http://tooltwist.com/" target="_blank" class="logo">
      <img src="/netinfofe/images/tooltwist.png" alt="tooltwist">
    </a>
    <a href="https://vueschool.io/?utm_source=Vuejs.org&utm_medium=Banner&utm_campaign=Sponsored%20Banner&utm_content=V1" target="_blank" class="logo">
      <img src="/netinfofe/images/vueschool.png" alt="vue school">
    </a>
    <a href="https://vehikl.com/" target="_blank" class="logo">
      <img src="/netinfofe/images/vehikl.png" alt="vehikl">
    </a>
    <a href="https://www.nativescript.org/vue?utm_source=vue-js-org&utm_medium=website&utm_campaign=nativescript-awareness" target="_blank" class="logo">
      <img src="/netinfofe/images/nativescript.png" alt="nativescript">
    </a>
    </div>
  </div>
  <a class="become-backer" href="/netinfofe/support-vuejs">
    成为赞助者
  </a>
</div>

-->


<div class="content cookbook with-sidebar ">
  
    
      <div id="ad">
  <!--<a href="https://time.geekbang.org/column/intro/81?utm_source=website&utm_medium=vue&utm_campaign=81-onsell&utm_content=201805banner" target="_blank" rel="nofollow">
    <img src="/images/geekbang5.gif" alt="极客时间">
  </a>-->
</div>

    
  
  
    <h1>Client-Side Storage</h1>
  
  
    <h2 id="Base-Example"><a href="#Base-Example" class="headerlink" title="Base Example"></a>Base Example</h2><p>Client-side storage is an excellent way to quickly add performance gains to an application. By storing data on the browser itself, you can skip fetching information from the server every time the user needs it. While especially useful when offline, even online users will benefit from using data locally versus a remote server. Client-side storage can be done with <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Cookies" target="_blank" rel="noopener">cookies</a>, <a href="https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API" target="_blank" rel="noopener">Local Storage</a> (technically “Web Storage”), <a href="https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API" target="_blank" rel="noopener">IndexedDB</a>, and <a href="https://www.w3.org/TR/webdatabase/" target="_blank" rel="noopener">WebSQL</a> (a deprecated method that should not be used in new projects).</p>
<p>In this cookbook entry we’ll focus on Local Storage, the simplest of the storage mechanisms. Local Storage uses a key/value system for storing data. It is limited to storing only simple values but complex data can be stored if you are willing to encode and decode the values with JSON. In general, Local Storage is appropriate for smaller sets of data you would want to persist, things like user preferences or form data. Larger data with more complex storage needs would be better stored typically in IndexedDB.</p>
<p>Let’s begin with a simple form based example:</p>
<figure class="highlight html"><table><tr><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">"app"</span>&gt;</span></span><br><span class="line">  My name is <span class="tag">&lt;<span class="name">input</span> <span class="attr">v-model</span>=<span class="string">"name"</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure>
<p>This example has one form field bound to a Vue value called <code>name</code>. Here’s the JavaScript:</p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="keyword">const</span> app = <span class="keyword">new</span> Vue(&#123;</span><br><span class="line">  el: <span class="string">'#app'</span>,</span><br><span class="line">  data: &#123;</span><br><span class="line">    name: <span class="string">''</span></span><br><span class="line">  &#125;,</span><br><span class="line">  mounted() &#123;</span><br><span class="line">    <span class="keyword">if</span> (localStorage.name) &#123;</span><br><span class="line">      <span class="keyword">this</span>.name = localStorage.name;</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;,</span><br><span class="line">  watch: &#123;</span><br><span class="line">    name(newName) &#123;</span><br><span class="line">      localStorage.name = newName;</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure>
<p>Focus on the <code>mounted</code> and <code>watch</code> parts. We use <code>mounted</code> to handle loading the value from localStorage. To handle writing the data base, we watch the <code>name</code> value and on change, immediately write it.</p>
<p>You can run this yourself here:</p>
<p data-height="265" data-theme-id="0" data-slug-hash="KodaKb" data-default-tab="js,result" data-user="cfjedimaster" data-embed-version="2" data-pen-title="testing localstorage" class="codepen">See the Pen <a href="https://codepen.io/cfjedimaster/pen/KodaKb/" target="_blank" rel="noopener">testing localstorage</a> by Raymond Camden (<a href="https://codepen.io/cfjedimaster" target="_blank" rel="noopener">@cfjedimaster</a>) on <a href="https://codepen.io" target="_blank" rel="noopener">CodePen</a>.</p><br><script async src="https://static.codepen.io/assets/embed/ei.js"></script><br><br>Type something in the form and then reload this page. You’ll note that the value you typed previously will show up automatically. Don’t forget that your browser provides excellent developer tools for inspecting client-side storage. Here’s an example in Firefox:<br><br><img src="/images/devtools-storage.png" alt="Storage devtools in Firefox"><br><br>And here it is in Chrome:<br><br><img src="/images/devtools-storage-chrome.png" alt="Storage devtools in Chrome"><br><br>And then finally, an example in Microsoft Edge. Note that you can find application storage values under the Debugger tab.<br><br><img src="/images/devtools-storage-edge.png" alt="Storage devtools in Edge"><br><br><p class="tip">As a quick aside, these dev tools also offer you a way to remove storage values. This can be very useful when testing.</p>

<p>Immediately writing the value may not advisable. Let’s consider a slightly more advanced example. First, the updated form.</p>
<figure class="highlight html"><table><tr><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">"app"</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">p</span>&gt;</span></span><br><span class="line">    My name is <span class="tag">&lt;<span class="name">input</span> <span class="attr">v-model</span>=<span class="string">"name"</span>&gt;</span></span><br><span class="line">    and I am <span class="tag">&lt;<span class="name">input</span> <span class="attr">v-model</span>=<span class="string">"age"</span>&gt;</span> years old.</span><br><span class="line">  <span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">p</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">button</span> @<span class="attr">click</span>=<span class="string">"persist"</span>&gt;</span>Save<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure>
<p>Now we’ve got two fields (again, bound to a Vue instance) but now there is the addition of a button that runs a <code>persist</code> method. Let’s look at the JavaScript.</p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="keyword">const</span> app = <span class="keyword">new</span> Vue(&#123;</span><br><span class="line">  el: <span class="string">'#app'</span>,</span><br><span class="line">  data: &#123;</span><br><span class="line">    name: <span class="string">''</span>,</span><br><span class="line">    age: <span class="number">0</span></span><br><span class="line">  &#125;,</span><br><span class="line">  mounted() &#123;</span><br><span class="line">    <span class="keyword">if</span> (localStorage.name) &#123;</span><br><span class="line">      <span class="keyword">this</span>.name = localStorage.name;</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">if</span> (localStorage.age) &#123;</span><br><span class="line">      <span class="keyword">this</span>.age = localStorage.age;</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;,</span><br><span class="line">  methods: &#123;</span><br><span class="line">    persist() &#123;</span><br><span class="line">      localStorage.name = <span class="keyword">this</span>.name;</span><br><span class="line">      localStorage.age = <span class="keyword">this</span>.age;</span><br><span class="line">      <span class="built_in">console</span>.log(<span class="string">'now pretend I did more stuff...'</span>);</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>
<p>As before, <code>mounted</code> is used to load persisted data, if it exists. This time, though, data is only persisted when the button is clicked. We could also do any validations or transformations here before storing the value. You could also store a date representing when the values were stored. With that metadata, the <code>mounted</code> method could make a logical call on whether or not to store the values again. You can try this version below.</p>
<p></p><p data-height="265" data-theme-id="0" data-slug-hash="rdOjLN" data-default-tab="js,result" data-user="cfjedimaster" data-embed-version="2" data-pen-title="testing localstorage 2" class="codepen">See the Pen <a href="https://codepen.io/cfjedimaster/pen/rdOjLN/" target="_blank" rel="noopener">testing localstorage 2</a> by Raymond Camden (<a href="https://codepen.io/cfjedimaster" target="_blank" rel="noopener">@cfjedimaster</a>) on <a href="https://codepen.io" target="_blank" rel="noopener">CodePen</a>.</p><p></p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

<h2 id="Working-with-Complex-Values"><a href="#Working-with-Complex-Values" class="headerlink" title="Working with Complex Values"></a>Working with Complex Values</h2><p>As mentioned above, Local Storage only works with simple values. To store more complex values, like objects or arrays, you must serialize and deserialize the values with JSON. Here is a more advanced example that persists an array of cats (the best kind of array possible).</p>
<figure class="highlight html"><table><tr><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">"app"</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">h2</span>&gt;</span>Cats<span class="tag">&lt;/<span class="name">h2</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">div</span> <span class="attr">v-for</span>=<span class="string">"(cat, n) in cats"</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">p</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;<span class="name">span</span> <span class="attr">class</span>=<span class="string">"cat"</span>&gt;</span>&#123;&#123; cat &#125;&#125;<span class="tag">&lt;/<span class="name">span</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;<span class="name">button</span> @<span class="attr">click</span>=<span class="string">"removeCat(n)"</span>&gt;</span>Remove<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"></span><br><span class="line">  <span class="tag">&lt;<span class="name">p</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">input</span> <span class="attr">v-model</span>=<span class="string">"newCat"</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">button</span> @<span class="attr">click</span>=<span class="string">"addCat"</span>&gt;</span>Add Cat<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure>
<p>This “app” consists of a simple list on top (with a button to remove a cat) and a small form at the bottom to add a new cat. Now let’s look at the JavaScript.</p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="keyword">const</span> app = <span class="keyword">new</span> Vue(&#123;</span><br><span class="line">  el: <span class="string">'#app'</span>,</span><br><span class="line">  data: &#123;</span><br><span class="line">    cats: [],</span><br><span class="line">    newCat: <span class="literal">null</span></span><br><span class="line">  &#125;,</span><br><span class="line">  mounted() &#123;</span><br><span class="line">    <span class="keyword">if</span> (localStorage.getItem(<span class="string">'cats'</span>)) &#123;</span><br><span class="line">      <span class="keyword">try</span> &#123;</span><br><span class="line">        <span class="keyword">this</span>.cats = <span class="built_in">JSON</span>.parse(localStorage.getItem(<span class="string">'cats'</span>));</span><br><span class="line">      &#125; <span class="keyword">catch</span>(e) &#123;</span><br><span class="line">        localStorage.removeItem(<span class="string">'cats'</span>);</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;,</span><br><span class="line">  methods: &#123;</span><br><span class="line">    addCat() &#123;</span><br><span class="line">      <span class="comment">// ensure they actually typed something</span></span><br><span class="line">      <span class="keyword">if</span> (!<span class="keyword">this</span>.newCat) &#123;</span><br><span class="line">        <span class="keyword">return</span>;</span><br><span class="line">      &#125;</span><br><span class="line"></span><br><span class="line">      <span class="keyword">this</span>.cats.push(<span class="keyword">this</span>.newCat);</span><br><span class="line">      <span class="keyword">this</span>.newCat = <span class="string">''</span>;</span><br><span class="line">      <span class="keyword">this</span>.saveCats();</span><br><span class="line">    &#125;,</span><br><span class="line">    removeCat(x) &#123;</span><br><span class="line">      <span class="keyword">this</span>.cats.splice(x, <span class="number">1</span>);</span><br><span class="line">      <span class="keyword">this</span>.saveCats();</span><br><span class="line">    &#125;,</span><br><span class="line">    saveCats() &#123;</span><br><span class="line">      <span class="keyword">const</span> parsed = <span class="built_in">JSON</span>.stringify(<span class="keyword">this</span>.cats);</span><br><span class="line">      localStorage.setItem(<span class="string">'cats'</span>, parsed);</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>
<p>In this application, we’ve switched to use the Local Storage APIs versus “direct” access. Both work but the API method is generally preferred. <code>mounted</code> now has to grab the value and parse the JSON value. If anything goes wrong here we assume the data is corrupt and delete it. (Remember, any time your web application uses client-side storage, the user has access to it and can modify it at will.)</p>
<p>We have three methods now to handle working with cat. Both <code>addCat</code> and <code>removeCat</code> handle updating the “live” Vue data stored in <code>this.cats</code>. They then run <code>saveCats</code> which handles serializing and persisting the data. You can play with this version below:</p>
<p></p><p data-height="265" data-theme-id="0" data-slug-hash="qoYbyW" data-default-tab="js,result" data-user="cfjedimaster" data-embed-version="2" data-pen-title="localstorage, complex" class="codepen">See the Pen <a href="https://codepen.io/cfjedimaster/pen/qoYbyW/" target="_blank" rel="noopener">localstorage, complex</a> by Raymond Camden (<a href="https://codepen.io/cfjedimaster" target="_blank" rel="noopener">@cfjedimaster</a>) on <a href="https://codepen.io" target="_blank" rel="noopener">CodePen</a>.</p><p></p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

<h2 id="Alternative-Patterns"><a href="#Alternative-Patterns" class="headerlink" title="Alternative Patterns"></a>Alternative Patterns</h2><p>While the Local Storage API is relatively simple, it is missing some basic features that would be useful in many applications. The following plugins wrap Local Storage access and make it easier to use, while also adding functionality like default values.</p>
<ul>
<li><a href="https://github.com/pinguinjkeke/vue-local-storage" target="_blank" rel="noopener">vue-local-storage</a></li>
<li><a href="https://github.com/ropbla9/vue-reactive-storage" target="_blank" rel="noopener">vue-reactive-storage</a></li>
<li><a href="https://github.com/yarkovaleksei/vue2-storage" target="_blank" rel="noopener">vue2-storage</a></li>
</ul>
<h2 id="Wrapping-Up"><a href="#Wrapping-Up" class="headerlink" title="Wrapping Up"></a>Wrapping Up</h2><p>While the browser will never replace a server persistence system, having multiple ways to cache data locally can be a huge performance boost for your application, and working with it in Vue.js makes it even more powerful.</p>

  
  
</div>

        
      </div>
      <script src="/netinfofe/js/smooth-scroll.min.js"></script>
    

    <!-- main custom script for sidebars, version selects etc. -->
    <script src="/netinfofe/js/css.escape.js"></script>
    <script src="/netinfofe/js/common.js"></script>

    <!-- search -->
    <link href="//cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css" rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="/netinfofe/css/search.css">
    <script src="//cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script>
    <script>
    [
      '#search-query-nav',
      '#search-query-sidebar',
      '#search-query-menu'
    ].forEach(function (selector) {
      if (!document.querySelector(selector)) return
      // search index defaults to v2
      var match = window.location.pathname.match(/^\/(v\d+)/)
      var version = match ? match[1] : 'v2'
      docsearch({
      appId: 'BH4D9OD16A',
      apiKey: '5638280abff9d207417bb03be05f0b25',
      indexName: 'vuejs_cn2',
      inputSelector: selector,
      algoliaOptions: { facetFilters: ["version:" + version] }
      })
    })
    </script>

    <!-- fastclick -->
    <script src="//cdnjs.cloudflare.com/ajax/libs/fastclick/1.0.6/fastclick.min.js"></script>
    <script>
    document.addEventListener('DOMContentLoaded', function() {
      FastClick.attach(document.body)
    }, false)
    </script>
  </body>
</html>
